<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.global.js"></script>
    <script src="./js/swiper-bundle.min.js"></script>
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/swiper-bundle.min.css">

</head>
<body>
<div id="app" v-cloak>
    <div class="indexcontent" v-if="index.type === 0">
        <div class="quan" @click="quan" v-if="message">

        </div>
        <div class="navigation">
            <div class="list">
                <div class="item" v-for="item in 5" :key="item" @click="index2item(item)"
                     :style="getBackgroundStyle(item+1)">
                </div>
            </div>
        </div>
    </div>
    <div class="fenye" v-else>
        <div class="top">
            <div class="midImg" :style="{background:'url(./img/'+index.type+'.png)'}">
            </div>
            <div class="back" @click="index.type = 0">
            </div>
        </div>
        <div class="content">
            <div class="swiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" v-for="(row,index) in index.list[index.type]" :key="index">
                        <div class="left">
                            <div class="titleImg"></div>
                            {{row.title}}
                        </div>
                        <div class="right">
                            <template v-if="row.type === 'six'">
                                <div class="six">
                                    <div class="item" v-for="(item,index) in row.row" :key="index"
                                         :class="{merge: item.merge}">
                                        <div class="mergeList" v-if="item.merge">
                                            <div class="mergeImg"
                                                 @click='previewClick(img)' :style="{backgroundImage:`url(${img})`}"
                                                 v-for="(img,index) in item.image" :key="index">
                                            </div>
                                        </div>
                                        <div v-else class="sixImg" @click='previewClick(item.image)'
                                             :style="{backgroundImage:`url(${item.image})`}"></div>
                                        <div class="title">{{item.title}}</div>
                                    </div>
                                </div>
                            </template>
                            <template v-if="row.type === 'one'">
                                <div class="one" v-for="(item,index) in row.row" :key="index">
                                    <div class="oneImg" @click='previewClick(item.image)' style="text-align: center">
                                        <img :src="item.image" :alt="item.title">
                                        <div class="title">{{item.title}}</div>
                                    </div>
                                </div>
                            </template>
                            <template v-if="row.type === 'tow'">
                                <div class="tow">
                                    <div class="item" v-for="(item,index) in row.row" :key="index">
                                        <div class="oneImg" @click='previewClick(item.image)'
                                             :style="{backgroundImage:`url(${item.image})`}"></div>
                                        <div class="title">{{item.title}}</div>
                                    </div>
                                </div>
                            </template>

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="preview" v-if="showPreview">
            <div class="close-icon" @click="showPreview = false">
                X
            </div>
            <div class="preview-content">
                <img :src="url" alt="">
            </div>
        </div>
        <div class="foot"></div>
    </div>
</div>
<script>
  // import {reactive} from "./js/vue.global";

  // import {nextTick} from "./js/vue.global";

  const {createApp,nextTick, ref, reactive} = Vue

  createApp({
    setup() {
      const message = ref(true)
      const index = reactive({
        list: {
          1: [{
            type: 'six',
            title:'打击拒执犯罪',
            row: [
              {
                title: '2022年12月14日，鹿城区第十届人民代表大会常务委员会第六次会议上，区公安分局、区人民法院、区人民检察院主要负责人报告了打击“拒执犯罪”工作的成效，接受人大代表的监督',
                image: ['./img/1/11.jpg','./img/1/12.JPG'],
                merge:true
              },
              {
                title: '区人民法院院长刘万成作关于开展打击“拒执犯罪”联合协作整改落实情况的报告',
                image: './img/1/13.JPG'
              },
              {
                title: '区人民检察院检察长陈贤木作关于开展打击“拒执犯罪”联合协作整改落实情况的报告',
                image: './img/1/14.JPG'
              },
              {
                title: '区人大常委会副主任吴祝凡带队调研打击“拒执犯罪”工作开展情况',
                image: './img/1/15.jpg'
              },
              {
                title: '法院远程宣判',
                image: './img/1/16.jpg'
              },
            ]
          }],
          2:[        {
            type: 'one',
            title:'全面覆盖"管好钱"',
            row: [
              {
                title: '区人大常委会召开2023年度区级部门预算草案听证会',
                image: './img/2/23.jpg'
              },
            ]
          },
            {
              type: 'six',
              title:'全面覆盖"管好钱"',
              row: [
                {
                  title: '2023年7月31日，区第十届人大常委会举行第十一次会议，听取并审议了2023年全区政府投资、重大投资项目执行情况、2022年区级财政决算、2022年度区级预算执行与其他财政收支审计情况的报告。',
                  image: ['./img/2/21.JPG','./img/2/22.JPG'],
                  merge:true
                },
              ]
            },],
          3:[{
            type: 'six',
            title:'盯紧推动"把牢图"',
            row: [
              // {
              //   title: '2022年12月14日，鹿城区第十届人民代表大会常务委员会第六次会议上，区公安分局、区人民法院、区人民检察院主要负责人报告了打击“拒执犯罪”工作的成效，接受人大代表的监督',
              //   image: ['./img/1/原图/11.jpg','./img/1/原图/12.JPG'],
              //   merge:true
              // },
              {
                title: '区人大常委会主任贾焕翔主任围绕产业发展讲话',
                image: './img/3/31.jpg'
              },
              {
                title: '人大代表围绕产业发展开展座谈交流',
                image: './img/3/32.JPG'
              },
              {
                title: '人大代表围绕产业发展开展座谈交流',
                image: './img/3/33.JPG'
              },
              {
                title: '代表一行实地视察中国鞋都（温州）数字化生态产业链基地',
                image: './img/3/34.jpg'
              },
              {
                title: '代表一行实地视察中国鞋都（温州）数字化生态产业链基地',
                image: './img/3/35.jpg'
              },
              {
                title: '代表一行实地视察智能装备产业谷',
                image: './img/3/36.JPG'
              },
            ]
          },],
          4:[{
            type: 'six',
            title: '突出实效"定好事"',
            row: [
              // {
              //   title: '2022年12月14日，鹿城区第十届人民代表大会常务委员会第六次会议上，区公安分局、区人民法院、区人民检察院主要负责人报告了打击“拒执犯罪”工作的成效，接受人大代表的监督',
              //   image: ['./img/1/原图/11.jpg','./img/1/原图/12.JPG'],
              //   merge:true
              // },
              {
                title: '大南街道召开第二届议政会第二次会议',
                image: './img/4/41.jpg'
              },
              {
                title: '双屿街道组织召开第二届议政会第二次会议暨民生实事项目会商会',
                image: './img/4/42.JPG'
              },
              {
                title: '丰门街道在人大代表联络站召开第二届议政会第二次会议',
                image: './img/4/43.jpeg'
              },
              {
                title: '丰门街道召开第二届议政会第二次会议',
                image: './img/4/44.jpeg'
              },
              {
                title: '七都街道第二届议政会第二次会议胜利召开分组讨论',
                image: './img/4/45.JPG'
              },
              {
                title: '代表一行实地视察智能装备产业谷',
                image: './img/3/36.JPG'
              },
            ]
          },],
          5:[{
            type: 'one',
            title:'多方联动"聚合力"',
            row: [
              {
                title: '《浙江日报》刊登：“00后近看民主”暑期实践活动走进温州五马议事坊',
                image: './img/5/51.jpg'
              },
            ]
          },],
        },
        type: 0
      })
      const getBackgroundStyle = (imageUrl) => {
        return {
          'background-image': `url(./img/m${imageUrl}.png)`,
        };
      }
      const quan = () => {
        document.documentElement.requestFullscreen()
        message.value = false
      }
      const itemClick = (item) => {
        window.open(`./${item}.html`, '_self')
      }
      const url = ref('url')
      const showPreview = ref(false)
      const mySwiper = ref(null)
      const previewClick = (item) => {
        url.value = item
        showPreview.value = true
      }
      const index2item = (item) => {
        index.type = item
        nextTick(()=>{
          mySwiper.value = new Swiper('.swiper', {
            loop: false, // 循环模式选项
            // autoplay: {
            //   delay: 5000,
            //   stopOnLastSlide: false,
            //   disableOnInteraction: false,
            // }
          })
        })
      }
      return {
        message,
        index,
        quan,
        getBackgroundStyle,
        itemClick,
        previewClick,
        showPreview,
        mySwiper,
        url,
        index2item,
      }
    }
  }).mount('#app')
</script>
</body>
<style>
    body, html, #app {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
    }

    .quan {
        position: absolute;
        right: 100px;
        top: 50px;
        width: 112px;
        height: 35px;
        background: url("./img/screen.png") no-repeat center;
    }

    .indexcontent {
        width: 100%;
        height: 100%;
        background: url("./img/di.jpg") center no-repeat;
        background-size: 100% 100%;
    }

    .navigation {
        width: 100%;
        height: 55%;
        position: absolute;
        bottom: 0;
        background: url("./img/di2.png") center no-repeat;
        background-size: 100% 100%;
    }

    .list {
        box-sizing: border-box;
        padding: 5% 10%;
        height: 100%;
        display: flex;
        /*gap: 10px;*/
    }

    @keyframes animated-background {
        0% {
            transform: scale(1)
        }
        50% {
            transform: scale(0.98)
        }
        100% {
            transform: scale(1)
        }
    }

    .list .item {
        cursor: pointer;
        flex: 1;
        margin-left: 10px;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        animation: animated-background 2s ease infinite;
    }

    .list .item:first-child {
        margin-left: 0;
    }

</style>
</html>
